var MxSlider = function (jQueryObject, contenedorAncho, itemAncho, itemAlto) {
	this.o = jQueryObject;
	this.contenedorAncho = contenedorAncho;
	this.itemAncho = itemAncho;
	this.itemAlto = itemAlto;
	this.mostrar = Math.round(this.contenedorAncho / this.itemAncho) - 1;
	this.separacion = ((this.contenedorAncho-(this.itemAncho*this.mostrar))/(this.mostrar+1));
	this.itemsTotal = $(jQueryObject).find('.mx-carousel').children().size();
	this.paginas = Math.ceil(this.itemsTotal / this.mostrar);
	this.currentPosition = 0;	
	
	this.carouselCreate = function (jQueryObject) {
		var top = (this.itemAlto / 2) - 32;
		$(jQueryObject).find('.mx-carousel').wrap('<div class="mx-carouselWrapper" />');
		$(jQueryObject).find('.mx-carousel').children().css({marginLeft:this.separacion, width:this.itemAncho}).wrapAll('<div class="mx-slide"></div>');
		$(jQueryObject).find('.mx-carousel').css({width:this.contenedorAncho})
		$(jQueryObject).find('.mx-carouselWrapper')
			.prepend('<div class="mx-control mx-leftControl" style="left: -'+(this.separacion+10)+'px; top:'+top+'px">Anterior</div>')
			.append('<div class="mx-control mx-rightControl" style="left:'+(this.contenedorAncho)+'px; top:'+top+'px"">Siguiente</div>')
			.css({position:'relative'})
		var ancho = (this.itemsTotal*this.itemAncho)+((this.itemsTotal+1)*this.separacion);
		$(jQueryObject).find('.mx-slide').css({width:ancho});
		this.carouselBind(this.o);
	}
	
	this.carouselBind = function (jQueryObject) {
		var self = this, currentPosition, id, active;
		$(jQueryObject).find('.mx-control').bind('click', function(){
			self.currentPosition = ($(this).hasClass('mx-rightControl'))?self.currentPosition+1:self.currentPosition-1;
			self.controlsManager(self.o);
			$(jQueryObject).find('.mx-slide').animate({
				'marginLeft' : (self.contenedorAncho-self.separacion)*(-self.currentPosition)
			});
		});
		$(jQueryObject).find('.mx-slide').children().bind('click', function () {
			if (id != $(this).index()) {
				id = $(this).index();
				$(jQueryObject).find('.mx-slider li.active')
					.removeClass('active')
					.fadeOut(650);
				$(jQueryObject).find('.mx-slider li').eq(id)
					.addClass('active')
					.fadeIn(650, function () {
						var alto = $(jQueryObject).find('.mx-slider li.active').height();
						$(jQueryObject).find('.mx-slider').animate({height:alto}, 400)
					});
			}	
		})
	}
	
	this.controlsManager = function (jQueryObject){
		if (this.currentPosition == 0) {
			$(jQueryObject).find('.mx-leftControl').hide()
		} else {
			$(jQueryObject).find('.mx-leftControl').show()
		}		
		if (this.currentPosition == this.paginas-1) {
			$(jQueryObject).find('.mx-rightControl').hide()
		} else {
			$(jQueryObject).find('.mx-rightControl').show()
		}
	}
	
	this.sliderCreate = function (jQueryObject) {
		var alto = $(jQueryObject).find('.mx-slider li:first').height()
		$(jQueryObject).find('.mx-slider').height(alto);
		$(jQueryObject).find('.mx-slider li').hide();
		$(jQueryObject).find('.mx-slider li:first').show().addClass('active');
	}
	
	this.init = function () {
		this.sliderCreate(this.o);
		if ($(this.o).find('.mx-carousel').size()) {
			this.carouselCreate(this.o);
			this.controlsManager(this.o);
		}
	}
}

$(document).ready(function() {
	var slider1 = new MxSlider($('#test1'), 500, 110, 83);
	var slider2 = new MxSlider($('#test2'), 500, 110, 83);
	var slider3 = new MxSlider($('#test3'), 500, 110, 83);
	slider1.init()
	slider2.init()
	slider3.init()
})